<template>
  <div class="page-sheet signature" :class="en ? 'en' : ''">
    <PageHeader />
    <div class="row-list" :class="en ? 'en' : ''" v-if="docType == 1">
      <div class="row">
        <div class="label">编制<span class="en" v-if="en">(PREP.)</span></div>
        <div class="blank" data-sign-type="编制"></div>
      </div>
      <div class="row"></div>
      <div class="row">
        <div class="label">审核<span class="en" v-if="en">(VERIFY)</span></div>
        <div class="blank" data-sign-type="审核"></div>
      </div>
      <div class="row"></div>
      <div class="row">
        <div class="label">标审<span class="en" v-if="en">(STD)</span></div>
        <div class="blank" data-sign-type="标审"></div>
      </div>
      <div class="row"></div>
      <div class="row">
        <div class="label">批准<span class="en" v-if="en">(APPROVE)</span></div>
        <div class="blank" data-sign-type="批准"></div>
      </div>
    </div>
    <div class="row-list" :class="en ? 'en' : ''" v-else>
      <div class="row">
        <div class="label">编制<span class="en" v-if="en">(PREP.)</span></div>
        <div class="blank" data-sign-type="编制"></div>
      </div>
      <div class="row">
        <div class="label">校对<span class="en" v-if="en">(CHECK)</span></div>
        <div class="blank" data-sign-type="校对"></div>
      </div>
      <div class="row">
        <div class="label">审核<span class="en" v-if="en">(VERIFY)</span></div>
        <div class="blank" data-sign-type="审核"></div>
      </div>
      <div class="row">
        <div class="label">标审<span class="en" v-if="en">(STD)</span></div>
        <div class="blank" data-sign-type="标审"></div>
      </div>
      <div class="row">
        <div class="label">审定<span class="en" v-if="en">(AUTHORIZE)</span></div>
        <div class="blank" data-sign-type="审定"></div>
      </div>
      <div class="row">
        <div class="label">审批<span class="en" v-if="en">(ENDORSE)</span></div>
        <div class="blank" data-sign-type="审批"></div>
      </div>
      <div class="row">
        <div class="label">批准<span class="en" v-if="en">(APPROVE)</span></div>
        <div class="blank" data-sign-type="批准"></div>
      </div>
    </div>
    <table
      border="1"
      class="unresizable"
      :style="{ 'border-collapse': 'collapse', 'margin-left': en ? '-5mm' : '', width: en ? '' : '160mm' }"
    >
      <tbody>
        <tr>
          <td colspan="6" style="width: 99.7135%">会签栏<span v-if="en" class="en">(Signature)</span></td>
        </tr>
        <tr>
          <td style="width: 16.6189%">
            <template v-if="en">单位/部门<br /><span class="en">(Company/Dep.)</span></template>
            <template v-else>单位/部门</template>
          </td>
          <td style="width: 16.6189%">
            <template v-if="en">签名<br /><span class="en">(Signature)</span></template>
            <template v-else>签名</template>
          </td>
          <td style="width: 16.6189%">
            <template v-if="en">单位/部门<br /><span class="en">(Company/Dep.)</span></template>
            <template v-else>单位/部门</template>
          </td>
          <td style="width: 16.6189%">
            <template v-if="en">签名<br /><span class="en">(Signature)</span></template>
            <template v-else>签名</template>
          </td>
          <td style="width: 16.6189%">
            <template v-if="en">单位/部门<br /><span class="en">(Company/Dep.)</span></template>
            <template v-else>单位/部门</template>
          </td>
          <td style="width: 16.6189%">
            <template v-if="en">签名<br /><span class="en">(Signature)</span></template>
            <template v-else>签名</template>
          </td>
        </tr>
        <tr v-for="(list, key) of signatureInfoList" :key="key">
          <td style="width: 16.6189%" v-for="(item, k) of list" :key="key + k">{{ item[0] }}<br />{{ item[1] }}</td>
        </tr>
      </tbody>
    </table>
    <PageFooter />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PageHeader from '../PageHeader.vue'
import PageFooter from '../PageFooter.vue'

export default {
  components: {
    PageHeader,
    PageFooter
  },
  computed: {
    ...mapGetters(['languageType', 'signatureInfoList', 'docType']),
    en() {
      return this.languageType === 'both'
    }
  }
}
</script>
